<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>Document</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
</style>
<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false, // 搜地理位置搜索工
        // homeButton: false, // 返回首页按钮
        sceneModePicker: false, // 2D 3D切换按钮
        baseLayerPicker: false, // 底图切换按钮
        navigationHelpButton:false, // 帮助按钮
        animation: false, // 左下角动画面板
        timeline: false, // 时间轴
        fullscreenButton: false, // 全屏按钮
    });
    // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiN2ZlMWExNC04NjRlLTQzMTQtYmI2MS03M2NiN2Q0MjAwYTciLCJpZCI6ODYzNjIsImlhdCI6MTY0Nzc1NjgxNX0.UB9DEHTYlzJ-1N1XF8rH7uGEsw8W5nlMZuz-LTVizb8';
    // 开启太阳光照 
  viewer.scene.globe.enableLighting = true;
  // 重写home键方法
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(114.315636, 22.566902, 104924.8),
        orientation : {
            heading : 0.7, // east, default value is 0.0 (north)
            pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
            roll : 0.0     
        }
    });
});
// 定位到某个视角、
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(114.315636, 22.566902, 104924.8),
    orientation: {
        heading : 0.7, // east, default value is 0.0 (north)
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});

const pointLayer = new Cesium.CustomDataSource('pointLayer');
viewer.dataSources.add(pointLayer);
Cesium.GeoJsonDataSource.load(`./assets/point.geojson`)
    .then((res) => {
        // 获取entities
        const entities = res.entities.values;
        for (let i = 0; i < entities.length; i++) { 
            console.log(entities[i])
            let entity = entities[i]
            if (Cesium.defined(entity.billboard)) {
                // 调整垂直位置
                entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
                // 禁用label标签
                entity.label = undefined;
                // 添加根据距离显示隐藏
                entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);

                // 角度转经纬度
                var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
                var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
                var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
                // Modify description
                // Modify description
                var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                    '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                    '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                    '</tbody></table>';
                entity.description = description;
            }
            pointLayer.entities.add(entity)
        } 
    })
</script>
</html>